<script setup>
import { reactive, ref, defineProps } from "vue";
import { useRouter } from "vue-router"
import request from '@/api/request'
import { Delete, Edit, Search, Plus, Refresh } from '@element-plus/icons-vue'
// 新增：导入ElMessage用于提示
import { ElMessage, ElMessageBox } from 'element-plus'

let emits=defineEmits(["ref-table1"])
let props=defineProps(["data1"])

let router = useRouter();
const rules = reactive({})

let materialId=ref([]);
let materialName = ref([]);

// let materialId=ref([]);
let isVisible = ref(false) // 对话框显示状态
let data = ref({}) // 用于传递给修改表单的数据
let title = ref("") // 对话框标题

// 新增：保存选中的完整行数据（用于修改）
let selectedRow = ref([])

let page = ref({
    current: 1,
    size: 10,
    total: 0,
    records: []
})

let Material = ref({
    materialId: '',
    materialName: '',
    category:''
})

// 搜索
const handleSearch = () => {
    page.value.current = 1;
    loadData();
}

// 加载表格数据
let loadData = () => {
    request({
        url: '/material/index',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            materialId: Material.value.materialId,
            materialName: Material.value.materialName,
            category:Material.value.category
        }
    }).then(res => {
        page.value = res.data
        page.value.records.forEach(item=>{
            item.disabled = false;
        })
    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}

loadData();

// 刷新表格
let refTanle = () => {
    isVisible.value = false;
    loadData();
}

let selected = (row)=>{

    return !row.disabled
}


// 表格选择事件：更新选中状态和按钮禁用状态
let fuxuankuang = (a) => {
    selectedRow.value=a
} 



let formRef = ref()

// 重置
let chongzhi = () => {
    Material.value = {
        materialId: '',
        materialName: '',
        category:''
    }
    filterText.value = ''
    expandAllNodes()
    handleSearch()
}




   let onSubmit = () => {
    let boms = [];
    selectedRow.value.forEach(row=>{

        boms.push({
            materialId: props.data1.materialId,
            materialName: row.materialName,
            specificationsAndModels: row.materialId,
            unit: row.unit,
            materialRatio: 0
        }
        )
    })
         emits("ref-table1", boms)
    
}

</script>

<template>
    <div>
        <el-card>
            <template #header>
                <div>
                    <el-row>
                        <el-col :span="6">
                            <el-form ref="formRef" inline :model="Material">
                            <el-input 
                                v-model="Material.category" 
                                placeholder="输入关键字过滤分类"  
                                clearable 
                                style="margin-bottom: 10px;"
                                @change="handleSearch"
                            />
                        </el-form>
                        </el-col>

                        <el-col :span="18">
                            <el-form ref="formRef" inline :model="Material"
                                style="display: flex;justify-content: start;" class="card_wrap">
                                <el-form-item label="物料编码" size="default" prop="materialId" class="c_item">
                                    <el-input v-model="Material.materialId" class="sousuo"
                                        placeholder="请输入物料编码" clearable @change="handleSearch"></el-input>
                                </el-form-item>
                                <el-form-item label="物料名称" size="default" prop="materialName" class="c_item">
                                    <el-input v-model="Material.materialName" class="sousuo"
                                        placeholder="请输入物料名称" clearable @change="handleSearch"></el-input>
                                </el-form-item>
                                <el-form-item class="c_item">
                                    <template #default>
                                        <el-button type="primary" size="default" @click="handleSearch" :icon="Search">搜索</el-button>
                                        <el-button type="info" size="default" :plain=true @click="chongzhi" :icon="Refresh">重置</el-button>
                                    </template>
                                </el-form-item>
                            </el-form>


                            <el-table :data="page.records" border stripe @selection-change="fuxuankuang">
                                <el-table-column type="selection" width="55" :selectable="selected" />
                               <el-table-column prop="materialId" label="物料编码"/>
                               <el-table-column prop="materialName" label="物料名称"/>
                               <el-table-column prop="specificationsAndModels" label="规格型号"/>
                               <el-table-column prop="unit" label="单位"/>
                               <el-table-column prop="materialorProduct" label="物料/产品"/>
                               <el-table-column prop="category" label="所属分类"/>
                               <el-table-column prop="createTime" label="创建时间"/>
                                
                                
                            </el-table>
                            <el-pagination @current-change="(val) => { page.current = val; loadData() }" 
                                v-model:currentPage="page.current"
                                :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                            </el-pagination>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" class="right-bottom">确定</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                </div>
            </template>
        </el-card>
    </div>
</template>

<style scoped>
.sousuo {
    width: 200px;
}

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100% - 10px)/3);
    min-width: calc((100% - 10px)/3);
    max-width: calc((100% - 10px)/3);

    &:nth-child(3n) {
        margin-right: 0;
    }
}

.filter-tree :deep(.el-tree-node__content) {
    height: auto;
    padding: 5px 0;
}
.right-bottom{
 margin-top: 50px;
 margin-left: 280px ;
}
</style>